<template>
    <div class="logo" ><img src="../../public/logo.jpg" alt=""></div>
    
    <el-menu router @select="handleSelect" default-active="1" background-color="#031626" active-text-color="#fff" text-color="#fff" :collapse="collapse" @close="handleClose" @open="handleOpen">
        <el-menu-item index="/">
            <i class="iconfont icon-monitor-tablet-and-s"></i>
            <span>Dashboard</span>
        </el-menu-item>
        <el-menu-item index="/monitor-page">
            <i class="iconfont icon-feiji"></i>
            <span>监控页</span>
        </el-menu-item>
        <el-menu-item index="/monitor">
            <span>全局监控</span>
        </el-menu-item>
        <el-menu-item index="4">
            <span>服务监控</span>
        </el-menu-item>
        <el-menu-item index="5">
            <span>用户行为</span>
        </el-menu-item>
    </el-menu>
</template>

<script>
export default {
    data(){
        return {
            collapse:false
        }
    },
    methods:{
        handleClose(){
            console.log('menu handleClose');
        },
        handleOpen(){
            console.log('menu handleOpen');
        },
        handleSelect(index,indexPath){
            this.$emit('select',index,indexPath);
        }
    }
}
</script>

<style>
.el-menu-item.is-active{
    background-color: #409EFF !important;
}
.el-menu-item{
    display: flex;
    justify-content: flex-start;
}
.logo{
    width: 200px;
    height: 80px;
}
.logo img{
    max-width: 100%;
    height: auto;
}
.iconfont{
    margin-right: 10px;
}
</style>